<template>
	<view class="find">
		<view class="label" v-if="show">
			<text @click="setActiveTab('recommend')">推荐</text>
			<text @click="setActiveTab('video')">视频</text>
			<text @click="setActiveTab('live')">直播</text>
			<text @click="setActiveTab('game')">游戏</text>
			<text @click="setActiveTab('wallpaper')">壁纸</text>
			<text @click="setActiveTab('anime')">动漫</text>
		</view>
		<view class="attention-content" v-for="(item, index) in notes" :key="index">
			<view class="attention-content-img" @click="as(index)">
				<image :src="item.url" mode="aspectFit" v-if="item.mediaType"></image>
				<video :src="item.url" :controls="false" :show-center-play-btn="false" object-fit="contain"
					v-else></video>
			</view>
			<text class="attention-content-text" @click="as(index)">{{ item.content }}</text>
			<view class="attention-content-user">
				<view class="attention-content-user-img">
					<image :src="item.profilePrcture" mode="aspectFit" class="attention-content-user-img-image"></image>
					<text class="attention-content-user-text">{{ item.username }}</text>
				</view>
				<view class="attention-content-user-line" @click="discolor(index)" ref="redT">

					<image src="@/static/TestImg/img/indexImg/love.png" mode="aspectFit"
						class="attention-content-user-img-image" v-if="item.like"></image>
					<image src="@/static/TestImg/img/message/aixin.png" mode="aspectFit"
						class="attention-content-user-img-image" v-else></image>
					<text>{{ item.likeNum }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 'recommend', // 默认显示的标签
			lastScrollTop: 0,
			show: true,
			notes: [],

		};
	},
	created() {
		this.request("/getHomePage", "post", {
			userId: uni.getStorageSync("id")
		}).then(
			(res) => {
				console.log(res);
				this.notes = res.data.result;
				this.make();
			}).catch((err) => {
				console.log(err);
			})
	},
	methods: {
		setActiveTab(tab) {
			this.activeTab = tab;
			this.diaoyu(tab)
		},
		discolor(e) {
			console.log(this.notes[e].like);
			this.notes[e].like = !this.notes[e].like;
			// this.nates[e].NoSelected = !this.nates[e].NoSelected;
			if (this.notes[e].like == true) {
				this.request(`/like/goLike?postId=${this.notes[e].postId}&userId=${uni.getStorageSync("id")}`, "post")
					.then((res) => {
						console.log(res);
						this.notes[e].likeNum++;
					}).catch((err) => {
						console.log(err);
					});
			} else if (this.notes[e].like == false) {
				this.request(`/like/delLike?postId=${this.notes[e].postId}&userId=${uni.getStorageSync("id")}`,
					"delete")
					.then((res) => {
						console.log(res);
						this.notes[e].likeNum--;
					}).catch((err) => {
						console.log(err);
					})
			}

		},
		as(e) {
			uni.navigateTo({
				url:`/pages/index/viewAsText/viewAsText?postId=${this.notes[e].postId}&mediaType=${this.notes[e].mediaType}&followeeId=${this.notes[e].userId}`
			})
		},
		onPageScroll(e) {
			console.log(e);
			const currentScrollTop = e.scrollTop;
			if (currentScrollTop < this.lastScrollTop) {
				this.show = false;
			}
			this.lastScrollTop = currentScrollTop;
		},
		make() {
			for (var i = 0; i < this.notes.length; i++) {
				if (this.notes[i].mediaType == "image") {
					this.notes[i].mediaType = true
				} else {
					this.notes[i].mediaType = false
				}
			}

		}
	}
}
</script>

<style scoped>
.find {
	width: 750rpx;
	display: flex;
	/* flex-direction: column; */
	/* justify-content: space-evenly; */
	flex-wrap: wrap;
}

.label {
	width: 100%;
	height: 60rpx;
	margin-top: 100rpx;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.attention-content {
	margin-top: 10rpx;
	width: 370rpx;
	height: 600rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 16rpx;
}

.attention-content-img {
	width: 100%;
	height: 470rpx;
	/* display: flex; */
	overflow: hidden;

}

.attention-content-img image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.attention-content-text {
	font-size: 35rpx;
}

.attention-content-user {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.attention-content-user-img {
	display: flex;
	justify-content: space-evenly;
}

.attention-content-user-img-image {
	width: 45rpx;
	height: 45rpx;
	object-fit: cover;
	object-position: center;
}

.attention-content-user-line {
	display: flex;
	align-items: center;
}
</style>